<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :lg="6" :md="8" :sm="24" :xl="4" :xs="24">
        <vab-card shadow="hover">
          <el-tree
            ref="treeRef"
            :data="treeList"
            :default-expanded-keys="[0]"
            :expand-on-click-node="false"
            node-key="corp_id"
            :props="defaultProps"
            @node-click="handleNodeClick"
          />
        </vab-card>
      </el-col>
      <el-col :lg="18" :md="16" :sm="24" :xl="20" :xs="24">
        <el-row :gutter="20">
          <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
            <top-card
              background="blue"
              :count-config="countConfig1"
              icon="money-cny-circle-line"
              percentage="10%"
              title="总额度"
            />
          </el-col>
          <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
            <top-card
              :count-config="countConfig2"
              icon="money-cny-box-line"
              percentage="10%"
              title="剩余额度"
              :type="list.balance < 100 ? true : false"
            />
          </el-col>
          <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
            <top-card
              :count-config="countConfig3"
              icon="money-cny-box-line"
              percentage="10%"
              title="累计使用额度"
            />
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
            <branch :list="list" />
          </el-col>
          <el-col :lg="16" :md="16" :sm="16" :xl="16" :xs="16">
            <vab-card shadow="hover">
              <el-table
                v-loading="listLoading"
                :border="border"
                :data="list.quota_list"
                height="260"
                :stripe="stripe"
              >
                <el-table-column
                  v-for="(item, index) in finallyColumns"
                  :key="index"
                  align="center"
                  :label="item.label"
                  :prop="item.prop"
                  :show-overflow-tooltip="true"
                  :sortable="item.sortable"
                  width="auto"
                >
                  <template #default="{ row }">
                    <span v-if="item.prop == 'expire_date'">
                      {{ dateFilter(row[item.prop]) }}
                    </span>
                    <span v-else>￥{{ row[item.prop] }}</span>
                  </template>
                </el-table-column>
                <template #empty>
                  <el-empty class="vab-data-empty" description="暂无成员" />
                </template>
              </el-table>
            </vab-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import Branch from './components/Branch'
  import TopCard from './components/TopCard'
  import { getWechatAll } from '@/api/enterpriseWeChat/weCom'
  import { getWelcomeShow } from '@/api/enterpriseWeChat/link'
  import { tenBitTimestamp } from '@/utils/index'
  export default defineComponent({
    name: 'Limit',
    components: { Branch, TopCard },
    setup() {
      const state = reactive({
        editRef: null,
        treeRef: null,
        border: true,
        stripe: true,
        lineHeight: 'default',
        treeList: [
          {
            corp_id: 0,
            corp_name: '企业',
            children: [],
          },
        ],
        defaultProps: {
          children: 'children',
          label: 'corp_name',
        },
        columns: [
          {
            label: '即将过期额度',
            prop: 'balance',
          },
          {
            label: '过期时间',
            prop: 'expire_date',
          },
        ],
        list: [],
        listLoading: true,
        corp_name: '',
        queryForm: {
          corp_id: null,
        },
        countConfig1: {
          startVal: 0,
          endVal: 0,
          decimals: 2,
          prefix: '￥',
          suffix: '',
          separator: ',',
          duration: 2000,
        },
        countConfig2: {
          startVal: 0,
          endVal: 0,
          decimals: 2,
          prefix: '￥',
          suffix: '',
          separator: ',',
          duration: 2000,
        },
        countConfig3: {
          startVal: 0,
          endVal: 0,
          decimals: 2,
          prefix: '￥',
          suffix: '',
          separator: ',',
          duration: 2000,
        },
      })
      const listData = async () => {
        const { data } = await getWechatAll()
        state.treeList[0].children = data
        if (data) {
          handleNodeClick({
            corp_id: data[0].corp_id,
            corp_name: data[0].corp_name,
          })
        }
      }
      const fetchData = async () => {
        state.listLoading = true
        const { data } = await getWelcomeShow(state.queryForm)
        console.log(data)
        state.list = data
        state.countConfig1.endVal = data.balance + data.total
        state.countConfig2.endVal = data.balance
        state.countConfig3.endVal = data.total
        state.listLoading = false
      }
      const handleNodeClick = (row) => {
        console.log(row)
        if (row.corp_id != 0) {
          state.queryForm.corp_id = row.corp_id
          state.corp_name = row.corp_name
          state.list = []
          fetchData()
        }
      }
      const dateFilter = (value) => {
        return tenBitTimestamp(value)
      }
      const finallyColumns = computed(() => {
        return state.columns
      })
      onMounted(async () => {
        await listData()
      })
      return {
        ...toRefs(state),
        finallyColumns,
        handleNodeClick,
        dateFilter,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .dashboard-container {
    padding: 0 !important;
    background: $base-color-background !important;

    :deep() {
      .el-card {
        height: 300px;

        [class*='-echart'] {
          width: 100%;
          height: 200px;
        }
      }
    }
  }
</style>
